<template>
  <page-container>
    <public-page-search @page-search-change="pageSearchChange"></public-page-search>
    <police-list
      portionUrl="/aitype/caseInfo/queryCaseInfo"
      :params="queryForm"
      @change="handleList"
      :buttonList="buttonList"
      v-if="queryForm.callTimeStart"
      @ready="handleReady"
    />

    <drawerList
      v-model:visible="visible"
      title="AI质态检测"
      portionUrl="/aitype/caseInfo/queryCaseInfo"
      :params="qualityTestingParams"
    />
  </page-container>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, createVNode, toRaw } from 'vue';
import PublicPageSearch from '@/views/intelligent-analysis/components/public-page-search/index.vue';
import { Modal } from 'ant-design-vue';
import PoliceList from '@/components/police-list/index.vue';
import { exportExcel } from '@/api/intelligentanalysis/alert';
import { downloadExcel, downloadForm } from '@/utils/download';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import drawerList from '@/components/police-list-drawer/index.vue';

//查询条件
// interface queryForm {
//   callTimeStart: string;
//   callTimeEnd: string;
//   inputParams?: string; //列表搜索内容
//   callSummaryCodes?: string; //接警类别
//   dealSummaryCodes?: string; //反馈类别
//   xqdwCodes?: string; //辖区单位
//   classifyCodes?: string;
//   page: any;
//   size: any;
//   caseNos?: string;
//   searchType: string; //传统和智能
//   inputType: string;
//   dealFlag: any;
// }
interface ButtonItem {
  type: string;
  name: string;
  background?: string;
  icon?: string;
  clickHandle?: () => any;
  visble?: () => boolean;
}
export default defineComponent({
  components: {
    PublicPageSearch,
    PoliceList,
    drawerList,
  },
  setup() {
    const router = useRouter();
    const isLabel = ref(0);
    //查询字段
    let queryForm = reactive({
      callTimeStart: '',
      callTimeEnd: '',
      page: '1',
      size: '50',
      searchType: '0',
      inputType: '',
      inputParams: '',
      dealFlag: '',
      callSummaryCodes: '',
      classifyCodes: '',
      dealSummaryCodes: '',
      xqdwCodes: '',
    });
    const visible = ref<boolean>(false);
    const qualityTestingParams = reactive({
      callTimeStart: '',
      callTimeEnd: '',
      page: 1,
      size: 50,
      searchType: '0',
      inputType: '',
      inputParams: '',
      callSummaryCodes: '',
      checkCode: '',
      dealSummaryCodes: '',
      xqdwCodes: '',
    });

    const caseNos = ref<any>([]);
    const handleList = value => {
      caseNos.value = value.toString();
    };
    const count = ref<number>(0);
    const handleReady = value => {
      count.value = value;
    };
    //导出弹框
    const handleExlex = () => {
      if (caseNos.value.length) {
        let obj = Object.assign({ caseNos: caseNos.value }, queryForm);
        // exportExcel(obj).then(res => {
        //   downloadExcel(res, '警情列表');
        // });
        downloadForm((window as any).g.baseURL + '/aitype/caseInfo/exportExcel', obj);
      } else {
        if (count.value > 50000) {
          Modal.error({
            title: '提示',
            icon: createVNode(ExclamationCircleOutlined),
            content: '全部警情数量大于5万,请选择手动点击导出的数据!',
          });
        } else {
          Modal.confirm({
            title: '提示',
            icon: createVNode(ExclamationCircleOutlined),
            content: '是否导出全部数据？',
            okText: '确认',
            cancelText: '取消',
            onOk() {
              let obj = queryForm;
              obj.page = '';
              obj.size = '';
              // exportExcel(obj).then(res => {
              //   downloadExcel(res, '警情列表');
              // });
              downloadForm((window as any).g.baseURL + '/aitype/caseInfo/exportExcel', obj);
            },
          });
        }
      }
      return;
    };
    // 展示AI质态监测
    const openQualityControl = () => {
      visible.value = true;
    };

    // 跳转下级标签
    const openSubordinateLabel = () => {
      router.push({ name: 'subordinate-label', query: { ...toRaw(queryForm) } });
    };

    const buttonList = ref<Array<ButtonItem>>([
      {
        name: 'AI质态检测',
        type: 'primary',
        background: '#205EE9',
        icon: 'icon-AIjiarengongbiaoqian',
        clickHandle: openQualityControl,
      },
      {
        name: '二级标签',
        type: 'primary',
        background: '#205EE9',
        icon: 'icon-AIjiarengongbiaoqian',
        clickHandle: openSubordinateLabel,
        visble: () => isLabel.value === 1,
      },
      {
        name: '导出',
        type: '',
        clickHandle: handleExlex,
      },
    ]);

    const pageSearchChange = (params, attr) => {
      Object.keys(queryForm).forEach(key => {
        Object.prototype.hasOwnProperty.call(params, key) && (queryForm[key] = params[key]);
      });
      Object.keys(qualityTestingParams).forEach(key => {
        Object.prototype.hasOwnProperty.call(params, key) &&
          (qualityTestingParams[key] = params[key]);
      });
      qualityTestingParams.checkCode = params.classifyCodes;
      isLabel.value = attr?.isLabel || 0;
    };
    return {
      handleList,
      visible,
      qualityTestingParams,
      queryForm,
      buttonList,
      pageSearchChange,
      handleReady,
      count,
    };
  },
});
</script>
<style lang="less" scoped></style>
